<template>
    <div>
        <h1>VUE Router</h1>
        <router-link to="/" tag="div">返回首页</router-link>
        <p>页面传值：适用于页面之间的参数传递</p>
        <P>?是间隔符，？后面的是query</P>
        <P>?是间隔符，？前面的是params</P>
        // route负责展示信息 router调转链接
        <p>?后面的参数：{{$route.query.name}}</p>
        <p>?后面的参数：{{$route.query.age}}</p>
        <p>?后面的参数：{{$route.query.no}}</p>
        <hr>
         <p>?前面的参数：{{$route.params.username}}</p>
         <P>动态路由——经典场景：前一个页面是列表页，当前页面是详情页。适用于页面大量重复、结构相似、数据不同</P>
        <P>动态路由的特点：修改URL时，如果仍然符合当前的路由规则，就意味着还要使用这个组件。就不会先删除这个
        组件，在创建这个组件，而是直接复用。所以，钩子函数不会再次执行。</P>
        <P>为了响应路由的变化，有两个方案：1.watch2.路由的钩子函数</P>
        <button @click="navToClass2">看看二班的代码</button>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
        //  watch: {
        //     '$route' (to,from) {
        //      console.log(to,from);
        //       console.log(`我正在请求${this.$route.params.username}对应的数据...`)    }},
    beforeRouteUpdate(to,from,next) {
         console.log(`我正在请求${this.$route.params.username}对应的数据...`)
         next()
    },
    created() {
         console.log(`我正在请求${this.$route.params.username}对应的数据...`)
    },
    methods: {
        navToClass2() {
            let params1 = 'class1';
            let params2 = 777;
            this.$router.p(`../class2-router/${param1}/about/${param2}?name=jack`)
        }
    },
}
</script>

<style scoped>

</style>